<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="监控指标详情"
    :destroyOnClose="true"
    width="100%"
    placement="right"
  >
    <Descriptions size="large" :column="2" :bordered="true">
      <DescriptionsItem label="监控名称">{{ info.monitorName }}</DescriptionsItem>
      <DescriptionsItem label="规则">{{ info.ruleType }}</DescriptionsItem>
    </Descriptions>
    <div v-if="flag === false">
      <BasicTable @register="registerThresholdTable"></BasicTable>
    </div>
    <div v-if="flag === true">
      <BasicTable @register="registerEventTable"></BasicTable>
    </div>

    <div class="absolute bottom-10 right-8">
      <Button style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</Button>
      <Button type="primary" style="font-weight: bolder" @click="onClose">确定</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import BasicTable from '/@/components/BasicTable/BasicTable.vue';
import { Drawer, Descriptions, DescriptionsItem, Button } from 'ant-design-vue';
import { getCesRecordDetail } from '/@/api/maintenance-center/alarm/alarm';
import { CesRecordDetailItem } from '/@/api/maintenance-center/alarm/model/alarmModel';
import { useBasicTable } from '/@/components/BasicTable/hooks/useBasicTable';

const eventColumns = [
  {
    dataIndex: 'value',
    title: '事件类型',
  },
  {
    dataIndex: 'description',
    title: '数据采样时间',
  },
];

const thresholdColumns = [
  {
    dataIndex: 'value',
    title: '数据',
  },
  {
    dataIndex: 'description',
    title: '数据采样时间',
  },
];
const visible = ref<boolean>(false);
const info = ref({});
const flag = ref(false);
const [registerThresholdTable, { setTableData: setThreshold }] = useBasicTable({
  columns: thresholdColumns,
});

const [registerEventTable, { setTableData: setEvent }] = useBasicTable({
  columns: eventColumns,
});

const showDrawer = async (params) => {
  const details: CesRecordDetailItem = await getCesRecordDetail(params);
  visible.value = true;
  let tableData = details.alarmData;
  info.value = details;
  if (details.ruleType === 'THRESHOLD') {
    flag.value === true;
    nextTick(() => {
      setThreshold(tableData);
    });
  } else {
    flag.value === false;
    nextTick(() => {
      setEvent(tableData);
    });
  }
};

const onClose = () => {
  visible.value = false;
};

defineExpose({
  showDrawer,
  onClose,
});
</script>
